<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <input type="text" name="username" class="user">
    <br>
    <input type="password" name="password" class="pwd">
    <br>

    <!-- 滑动验证 -->
    <!-- 图文验证 -->
    <!-- 保底：验证码 -->
    <button type="submit" class="btn">注册</button>

    <script src="../js/ajax.js"></script>
    <script>


        const get = ele => document.querySelector(ele);
        get('.btn').onclick = function () {
            // 获取用户名和密码
            const username = get('.user').value;
            const password = get('.pwd').value;
            // 验证
            
            // 请求
            ajax({
                type : 'post' ,
                path : 'http://192.168.58.110/php/reg.php' ,
                data : {
                    username ,
                    password 
                } , 
                success : res => {
                    console.log(res);
                    // 解构
                    const  {status , msg} = res ;
                    if(status) {
                        alert('注册成功');
                        // 跳转至登陆
                        location.href = './11_login.html';
                    // status返回了false,前端数据有误需要在测试阶段就把bug解决掉
                    } else {
                        alert('用户名已存在，请重新输入');
                        // 清空用户名和密码的输入框
                        // 用户名获取焦点
                        get('.user').value = '';
                        get('.pwd').value = '';
                        get('.user').focus();
                    }
                }
            })
        }

    </script>

</body>

</html>